<template>
  <div>
    <v-btn color="primary" @click="show=true" >添加</v-btn>
    <v-card-title>
      <!--弹出的对话框-->
      <v-dialog max-width="500" v-model="show" persistent>
        <v-card>
          <!--对话框的标题-->
          <v-toolbar dense dark color="primary">
            <v-toolbar-title>{{isEdit?'编辑':'新增'}}品牌</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn  icon @click="show=false"><v-icon>close</v-icon></v-btn>
          </v-toolbar>
          <!--对话框的内容，表单-->
          <v-card-text class="px-5">
            <MyBrandForm
              @close="closeBrandForm"
              :old-brand="oldBrand"
              :isEdit="isEdit"
              :show="show"
            ></MyBrandForm>
          </v-card-text>

        </v-card>
      </v-dialog>
      <!--定义输入框大小-->
    <!-- <v-col cols="6" md="2" >-->
      <!--空间隔离组件-->
      <v-spacer/>
      <v-spacer/>
      <v-spacer/>
      <!--
        搜索框 与search属性相关联
        append-icon 小图标
        hide-details 隐藏错误提示
      -->
        <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">

        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-icon small class="mr-2" @click="editItem(props.item)">edit</v-icon>
          <v-icon small @click="deleteItem(props.item)">delete</v-icon>
        </td>
      </template>
    </v-data-table>
  </div>
</template>
<script>
  import MyBrandForm from "./MyBrandForm";
  import Cascader from "../../components/cascader/Cascader";export default {
        name: "MyBrand",
     components:{
       MyBrandForm,
     },
      data(){
          return{
            show:false,
            isEdit:false,
            name:"",
            oldBrand:{},
            search:"",//搜索关键字
            totalBrands:0,//总条数
            pagination:{},//分页对象
            loading:true,//是否在加载中
            brands:[],//当前页品牌数据
            headers:[//头信息
              {text:"id",align:"center",value:"id"},
              {text: "名称",align: "center",value: "name",sortable: false},
              {text: "LOGO",align: "center",value: "image",sortable: false},
              {text: "首字母",align: "center",value: "letter"},
              {text: "操作",align: "center",value: "id",sortable: false},
            ],


          }
      },
      methods:{
          editItem(brand){
            //发送请求信息
            this.$http.get("/item/category/categories/"+brand.id)
              .then((response)=>{
                //处于编辑状态
                this.isEdit=true;
                //获取要编辑的品牌信息
                this.oldBrand=brand;
                //打开弹窗
                this.show=true;
                //回显分类信息
                this.oldBrand.categories=response.data;

              })
          },
          deleteItem(brand){
            var confirm = window.confirm("确定要删除吗？");
            if(confirm){
              this.$http.get("/item/brand/deleteBrand?bid="+brand.id)
                .then(()=>{
                  this.getDataFromServer2();
                  this.$message.success("删除成功！");
                }).catch(()=>{
                  this.$message.error("删除失败!");
              })
            }
          },
          closeBrandForm(){
            this.show=false;//关闭弹窗
            this.getDataFromServer2();//更新数据
          },
          reset(){
            var a=this.$refs;
            console.log(this);
          },
          getDataFromServer(){//从服务器上获取数据的方法
            const brands=[//定义一个brand对象集合
              {
                "id": 2032,
                "name": "OPPO",
                "image": "http://img10.360buyimg.com/popshop/jfs/t2119/133/2264148064/4303/b8ab3755/56b2f385N8e4eb051.jpg",
                "letter": "O",
                "categories": null
              },
              {
                "id": 2033,
                "name": "飞利浦（PHILIPS）",
                "image": "http://img12.360buyimg.com/popshop/jfs/t18361/122/1318410299/1870/36fe70c9/5ac43a4dNa44a0ce0.jpg",
                "letter": "F",
                "categories": null
              },
              {
                "id": 2034,
                "name": "华为（HUAWEI）",
                "image": "http://img10.360buyimg.com/popshop/jfs/t5662/36/8888655583/7806/1c629c01/598033b4Nd6055897.jpg",
                "letter": "H",
                "categories": null
              },
              {
                "id": 2036,
                "name": "酷派（Coolpad）",
                "image": "http://img10.360buyimg.com/popshop/jfs/t2521/347/883897149/3732/91c917ec/5670cf96Ncffa2ae6.jpg",
                "letter": "K",
                "categories": null
              },
              {
                "id": 2037,
                "name": "魅族（MEIZU）",
                "image": "http://img13.360buyimg.com/popshop/jfs/t3511/131/31887105/4943/48f83fa9/57fdf4b8N6e95624d.jpg",
                "letter": "M",
                "categories": null
              }
            ];
        //延迟一段时间，模拟数据请求时间
            setTimeout(()=>{
              this.brands=brands;//赋值给品牌数组
              this.totalBrands=brands.length;//赋值数据总条数
              this.loading=true;//加载完成
            },1000)
          },
        getDataFromServer2(){
            //加载数据
            this.loading=true;
            //axios发起get请求
            this.$http.get("item/brand/page",{
              params:{
                key:this.search,//模糊查询
                page:this.pagination.page,//当前页
                rows:this.pagination.rowsPerPage,//页面条数
                desc:this.pagination.descending,//是否降序
                sortBy:this.pagination.sortBy,//排序字段

              },
            }).then(response=> {//获得响应
              this.brands=response.data.items;// 品牌数据
              this.totalBrands=response.data.total;//总条数
              this.loading=false;//加载完成
              console.log(response)
            })
        },

      },

      watch:{//监控数据前后变化
        pagination:{//监视pagination属性变化
          deep:true,//深度监控
          handler(){//变化后的回调函数，这里我们直接调用getDataFromServer2方法就可以了
            this.getDataFromServer2();
          }
        },
        search:{//监视search属性变化
          handler(){
            this.getDataFromServer2();
          }

        }
      },
      //渲染后执行
      mounted() {
          // this.getDataFromServer();//调用数据初始化函数
        this.getDataFromServer2();
      }
    }
</script>
<!--scoped:当前样式之作用于当前组件的节点-->
<style scoped>

</style>
